<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<style type="text/css">
		/* html {
		  background: #fff;
		  width:100%;
		  height: 100%;
		}
		
		body {
		margin: 0;
		  background: #fff;
		  filter: invert(1) hue-rotate(270deg);
		  width:100%;
		  height: 100%;
		} */
		
		ul {
			list-style: none;
			color: #fff;
			font-size: 20px;
			border: 3px solid #000;
			padding: 1rem 2rem;
			min-height: 200px;
			margin: 15px 2rem 0 0;
			background: #323232;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
			border-radius: 8px;
		}

		li {
			padding: 0.3rem 0;
		}

		li::before {
			content: "🗹 ";
			color: aqua;
		}

		li.completed::before {
			content: "✔ ";
			text-decoration: none;
			color: greenyellow;
		}

		li.completed {
			text-decoration: line-through;
			color: #bdbdbd;
		}
		.breadcrumb {
		  font-size: 1.6rem;
		  color: black;
		}
		.breadcrumb a:first-child {
		  color: #82fcfd;
		}
		.breadcrumb a:first-child::before {
		  content: " » ";
		}
		.breadcrumb a::after {
		  content: " /";
		  color: #ef6eae;
		}
		.breadcrumb a:last-child::after {
		  content: "";
		}

	</style>
	<body>
		<div>
			<h2>待处理</h2>
			<ul>
				<li>待办任务1</li>
				<li>待办任务2</li>
				<li>待办任务3</li>
				<li>待办任务4</li>
				<li>待办任务5</li>
			</ul>
		</div>
		<div>
			<h2>已完成</h2>
			<ul>
				<li class="completed">完成任务1</li>
				<li class="completed">完成任务2</li>
				<li class="completed">完成任务3</li>
			</ul>
		</div>
		<div class="breadcrumb">
		  <a>三钻</a>
		  <a>前端</a>
		  <a>教程</a>
		</div>
	</body>
</html>
